import columnsData, { columnsDataType } from './data'
// 折线图
import LineChart from '../LineChart'
import React, { useState } from 'react';
import { Row, Col, Descriptions } from 'antd';
import ProTable from '@ant-design/pro-table';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { getExcRateList } from '../service';

const Protable = () => {
  const [chartData, setChartData] = useState([])

  // 表头赋值
  const columns: ProColumns<columnsDataType>[] = columnsData

  // 定义金额单元格
  const amount: any = (text: number) => [
    <p
      key='amount'
      style={{ textAlign: 'right', margin: 0 }}
    >
      {typeof text === 'number' ? text.toFixed(6) : null}
    </p>
  ]
  // 列渲染样式赋值
  columns.forEach(item => {
    item.dataIndex === 'totalValueOfComm' ? item.render = amount : undefined
    item.dataIndex === 'curCcyQty' ? item.render = amount : undefined
  })

  return (
    <ProTable<columnsDataType>
      scroll={{ x: 900, y: 255, scrollToFirstRowOnChange: true }}
      columns={columns}
      bordered
      rowKey="seqNo"
      // 请求获取的数据
      request={
        async (params = {}) => {
          console.log(params);

          let res = await getExcRateList({ ...params, pageNum: params.current })
          console.log(res);
          let data = res.body.list.map((item: any) => {
            return {
              date: item.curDate.replace("00:00:00", ""),
              exchangeRate: item.exchangeRate
            }
          }).reverse()
          console.log(data);

          setChartData(data)

          const result = {
            data: res.body.list,
            total: res.body.total,
            // success:res.success,
            // pageSize:res.pageSize,
            // current:res.current
          }
          return result
        }
      }
      pagination={{
        pageSize: 5,
      }}
      tableRender={(_, dom) => (
        <Row gutter={[16, 16]}>
          <Col xs={24} sm={24} md={24} lg={24} xl={16}>
            <div style={{ backgroundColor: '#fff', height: '100%', }}>
              {dom}
            </div>
          </Col>
          <Col xs={24} sm={24} md={24} lg={24} xl={8}
          >
            <div style={{ backgroundColor: '#fff', padding: 16 }}>
              <LineChart chartData={chartData} />
            </div>
          </Col>
        </Row >
      )}
      dateFormatter="string"
      headerTitle="汇率生效记录"
    />
  )
}
export default Protable